<template>
  <!-- 角色管理、临时授权里面的加入人员 -->
  <el-dialog
    width="600px"
    custom-class="customWidth"
    center
    :before-close="closeDialog"
    title="加入人员"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="addDialogFormVisible"
    class="add"
  >
    <el-form :inline="true" :model="dataForm" ref="dataForm" class="elformcss">
      <el-form-item label="部门" prop="departmentGuid">
        <el-cascader
          size="mini"
          v-model="departmentGuid"
          :options="deptTree"
          ref="cascaderAddDept"
          placeholder="请选择部门"
          @change="handleChangeDept"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="姓名" prop="username">
        <el-input v-model="dataForm.username" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item label="编号" prop="userNumber">
        <el-input v-model="dataForm.userNumber" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item label="卡号" prop="carnumber">
        <el-input v-model="dataForm.carnumber" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchifo" size="mini">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :stripe="true"
      border
      :header-cell-style="headFirst"
      @selection-change="handleSelectionChange"
      height="35vh"
      :cell-style="(res) => headFirst_col(res, [])"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="departmentName" label="部门"></el-table-column>
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column prop="userNumber" label="编号"></el-table-column>
      <el-table-column prop="cardNumber" label="卡号"></el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChangepage"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="recordCount"
      ></el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addvisible()">取消</el-button>
      <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      // 控制是否可以多选
      isCheckbox: false,
      // 控制人员搜索
      isPersonnel: false,
      addDialogFormVisible: false,
      dataForm: {
        username: '',
        carnumber: '',
        userNumber: ''
      },
      departmentGuid: [],
      deptTree: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      recordCount: 0,
      currentPage: 1,
      searchInfo: {},
      selectarr: [],
      roomGuid: ''
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  mounted() {
    this.getDeptTree()
  },
  methods: {
    closeDialog(done) {
      this.addDialogFormVisible = false
      done()
    },
    addvisible() {
      this.departmentGuid = []
      this.tableData = []
      this.$refs['dataForm'].resetFields()
      this.addDialogFormVisible = false
    },
    addataFormSubmit() {
      if (this.selectarr.length < 1) {
        this.$message({
          message: '请选择人员',
          type: 'warning'
        })
        return
      }
      // 不可多选
      if (!this.isCheckbox) {
        console.log(this.isCheckbox)
        // 临时授权
        if (this.isPersonnel && this.selectarr.length > 1) {
          this.$message({
            message: '临时授权只能选择一人',
            type: 'warning'
          })
          return
        }
      }

      this.$refs['dataForm'].resetFields()
      this.bindroomstudent()
    },
    addinit(roomGuid, isPersonnel, isCheckbox) {
      this.roomGuid = roomGuid
      this.addDialogFormVisible = true
      this.pageNum = 1
      this.pageSize = 20
      this.recordCount = 0
      this.currentPage = 1
      if (isPersonnel) {
        this.isPersonnel = isPersonnel
      }
      // 控制是否可以多选
      if (isCheckbox) {
        this.isCheckbox = isCheckbox
      }
    },
    handleChangeDept() {
      console.log(this.departmentGuid)
    },
    searchifo() {
      this.pageNum = 1
      this.getdepartmentinfo()
    },
    handleSelectionChange(val) {
      this.selectarr = []

      if (this.isPersonnel) {
        this.selectarr = val
      } else {
        for (var i = 0; i < val.length; i++) {
          this.selectarr.push(val[i].userGuid)
        }
      }
      console.log(val)

      // console.log(this.selectarr)
    },
    //部门信息
    getDeptTree() {
      this.$http({
        url: this.$http.adornUrl('/department/select-department-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data.messageContent)
          this.deptTree = data.messageContent
          this.recursiveget(this.deptTree)
          // console.log(JSON.stringify(this.deptTree));
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //递归添加
    recursiveget(deptTree) {
      for (var i in deptTree) {
        deptTree[i].value = deptTree[i].departmentGuid
        deptTree[i].label = deptTree[i].departmentName
        if (deptTree[i].children.length == 0) {
          delete deptTree[i].children
        } else {
          this.recursiveget(deptTree[i].children)
        }
      }
    },
    //获取部门简要信息
    getdepartmentinfo() {
      this.searchInfo = {}
      this.searchInfo.unitGuid = this.changeschoolid
      if (this.departmentGuid != []) {
        let departmentGuid = this.departmentGuid[this.departmentGuid.length - 1]
        this.searchInfo.departmentGuid = departmentGuid
      }
      if (this.dataForm.carnumber != '') {
        this.searchInfo.cardNumber = this.dataForm.carnumber
      }
      if (this.dataForm.username != '') {
        this.searchInfo.userName = this.dataForm.username
      }
      if (this.dataForm.userNumber != '') {
        this.searchInfo.userNumber = this.dataForm.userNumber
      }
      //
      if (this.isPersonnel) {
        this.$http({
          url: this.$http.adornUrl('/api/v1/Student/user-department-page'),
          method: 'post',
          data: this.$http.adornData({
            messageContent: {
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              searchInfo: this.searchInfo
            },
            messageType: 0
          })
        }).then(({ data }) => {
          if (data.messageCode == 200) {
            console.log(data)
            this.tableData = data.messageContent.data
            this.recordCount = data.messageContent.recordCount
            this.currentPage = data.messageContent.pageNum
          } else {
            this.$message.error(data.errorMessage)
          }
        })
      } else {
        this.$http({
          url: this.$http.adornUrl('/department/select-department-child-page'),
          method: 'post',
          data: this.$http.adornData({
            messageContent: {
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              searchInfo: this.searchInfo
            },
            messageType: 0
          })
        }).then(({ data }) => {
          if (data.messageCode == 200) {
            console.log(data)
            this.$message({
              message: '查询成功',
              type: 'success'
            })
            this.tableData = data.messageContent.data
            this.recordCount = data.messageContent.recordCount
            this.currentPage = data.messageContent.pageNum
          } else {
            this.$message.error(data.errorMessage)
          }
        })
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getdepartmentinfo()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getdepartmentinfo()
    },
    //房间分配绑定学生
    bindroomstudent() {
      if (this.isPersonnel) {
        this.$emit('refreshDataList', this.selectarr)
      } else {
        this.$http({
          url: this.$http.adornUrl('/area/room/bind-room-user'),
          method: 'post',
          data: this.$http.adornData({
            messageContent: {
              roomGuid: this.roomGuid,
              userGuidList: this.selectarr
            },
            messageType: 0
          })
        }).then(({ data }) => {
          if (data.messageCode == 200) {
            console.log(data)
            this.departmentGuid = []
            this.tableData = []
            this.$refs['dataForm'].resetFields()
            this.$message({
              message: '绑定人员成功',
              type: 'success',
              duration: 200,
              onClose: () => {
                this.addDialogFormVisible = false
                this.$emit('refreshDataList', 111)
              }
            })
            // console.log(JSON.stringify(this.deptTree));
          } else {
            this.$message.error(data.errorMessage)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.add {
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  /deep/.el-dialog--center .el-dialog__body {
    padding: 0 20px;
    padding-bottom: 0px;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
}

.elformcss {
  margin-bottom: 10px;
  border-bottom: 1px solid #e5e9f2;
}
.page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>